<!---->
<template>
  <div class="home">
    <el-container>
      <el-header>
        <commHead :user="user" :record="record" @handleSerch="handleSerch"></commHead>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import<组件名字> from '<组件路径>';
import commHead from "@/components/header.vue";
export default {
  //import引入的组件需要注入对象中才能用
  components: {
    commHead: commHead,
  },
  data() {
    return {
        username:'103宿舍',
        record:0,
        postData: {
          str:'',
          pageNo: 1,
          pageSize: 5,
      },
      tabData:[],
      pageData:{}
    };
  },
  //监听属性 类似于data概念
  computed: {
    user(){
      if(sessionStorage.getItem("user")){
        this.$store.commit("setUserObj",JSON.parse(sessionStorage.getItem("user")))
      }else{
        this.$store.commit("setUserObj",null)
      }
      return this.$store.state.userObj
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getRecord(){
      this.API.getRecord(this.user.id).then(res=>{
        if(res.message.code == 200){
              this.record = res.data
              console.log('访客记录',res.data)
            }
      })
    },
    handleSerch(val){
      console.log(this.$route.name)
      this.postData.str = val
      this.API.getBlogListByStr(this.postData).then(res=>{
        if(res.message.code == 200){
          this.tabData = res.data.pageData||[]
          const { currenPage, hasNext, hasPre, pageCount, pageSize } = res.data;
              this.pageData.currenPage = currenPage;
              this.pageData.hasNext = hasNext;
              this.pageData.hasPre = hasPre;
              this.pageData.pageCount = pageCount;
              this.pageData.pageSize = pageSize;
          this.$store.commit("setPageData",this.pageData)
          this.$store.commit("setTabData",this.tabData)
        }
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getRecord()
  },
  //生命周期-挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {}, //生命周期-创建之前
  beforeMount() {}, //生命周期-挂载之前
  beforeUpdate() {}, //生命周期-更新之前
  updated() {}, //生命周期-更新之后
  beforeDestroy() {}, //生命周期-销毁之前
  destroyed() {}, //生命周期-销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个会输会触发
};
</script>
<style lang='less' scoped>
@bg:rgba(10, 35, 54, 100);
.el-header {
  background: @bg;
  height: 100px !important;
}
.el-container {
  height: 100%;
}
.el-main{
  padding:0 20px;
  position: relative;
}
.home {
  height: 100%;
  width: 100%;
  .content{
      display: flex;
      .ml{
          flex: 1;
          margin-right:20px;
        //   border:1px solid #ccc;
          .blogList{
              display: flex;
              flex-direction: column;
              .line:hover{
                      background: #f8f9fa;
              }
              .line{
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  border-bottom: 1px solid #ccc;
                  padding:15px;
                  cursor: pointer;
                  .bl{
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;
                      .btitle{

                      }
                      .bdr{
                          color:#ccc;
                          margin:10px 0;
                          white-space:nowrap;
                          overflow:hidden;
                          text-overflow:ellipsis;
                      }
                  }
                  .br{
                      .ct{
                          line-height: 30px;
                          color:#ccc;
                      }
                  }
              }
          }
      }
      .mr{
          width:30%;
          border:1px solid #ccc;
          margin-left:20px;
          .mrt{
              text-align: center;
          }
          .tjList{
              .line{
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding:10px;
                  .bl{
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;
                      .btitle{

                      }
                      .bdr{
                          color:#ccc;
                          margin:10px 0;
                      }
                  }
                  .br{
                      .ct{
                          line-height: 30px;
                          color:#ccc;
                      }
                  }
              }
          }
          .about{
              text-align: center;
              margin-top:30px;
              line-height: 30px;
          }
      }
  }
}
//@import url(); 引入公共css类
</style>